<template>
  <div class="mod coin-switch">
    <!-- {{coinListdata[0]}} -->
    <div class="tabs coin-switch-tabs">
      <div class="quotes">
        <span class="mock-a fav"  @click="changeMainCoin('自选')" :class="areaType=='自选'?'active':''">
          <!---->
          <em>自选</em>
        </span>
        <span class="mock-a upper" v-for="(item,index) in coinTabArr" 
          :key="index" :class="areaType==item?'active':''" @click="changeMainCoin(item)"
        >{{item}}</span>
      </div>
      <!-- 币种搜索 -->
      <div class="actions-serch flex" >
        <div class="input-box" >
          <input placeholder="搜索" maxlength="9"  type="text" />
          <i class="el-icon-search i_sos" ></i>
          <i class="hb_icon_clear" style="display:none" ></i>
        </div>
        <button class="btnexch upper" @click="showCny()">
          <i class="iconfont icon-yqfqiehuan" ></i>CNY
        </button>
      </div>
    </div>
    <!--币种列表 -->
      <div class="coin-switch-content coin_list">
        <template>
          <el-table
            :data="coinList"
            style="width: 100%;background-color:#171b2b;"
            :default-sort = "{prop: 'date', order: 'descending'}"
              height="710"
              header-align='right'
              @row-click='onTableRowClick'
              v-show="areaType!='自选'"
            >
            <el-table-column
              prop="coin"
              label="币种"
              sortable
              width="90">
              <template slot-scope="scope" >
                <div class="left_coinname flex" v-if="scope.row.maincoin==areaType">
                        <div
                            @click.stop="setMylist(scope.row,scope.$index)"
                            :title="$t('label109')"
                            class="option wh-full"
                          >
                            <i
                              class="icon-star font-16 "
                              :class="scope.row.isMyLike?'el-icon-star-on star_active':'el-icon-star-off star_deft'"
                            >
                            </i>
                        </div>
                        <P :class="(scope.row.tradcoin==selectedCoinData.tradcoin&&scope.row.maincoin==selectedCoinData.maincoin)?'trad_active':''">{{scope.row.tradcoin}}</P>
                      </div>
              </template>
            </el-table-column>
            <el-table-column 
              prop="price"
              label="最新价"
              sortable
              width="90"
              align="right"
              >
              <template slot-scope="scope" v-if="scope.row.maincoin==areaType">
                <p class="currency" v-if="usdtorcny==1">{{ scope.row.price }}</p>
                <p class="currency" v-else>{{ scope.row.cny }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="rise"
              label="涨幅 "
              :formatter="formatter"
              width="100"
              align="right"
              >
              <template slot-scope="scope" v-if="scope.row.maincoin==areaType">
                      <span :class="scope.row.rise >= '0' ? 'color_up' : 'color_down'" 
                      v-if="scope.row.rise>=0">+{{scope.row.rise}}%</span>
                      <span :class="scope.row.rise < '0' ? 'color_down' : 'color_up'" 
                      v-if="scope.row.rise<0">{{scope.row.rise}}%</span>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="coinList"
            style="width: 100%;background-color:#171b2b;"
            :default-sort = "{prop: 'date', order: 'descending'}"
              height="710"
              header-align='right'
              @row-click='onTableRowClick'
              v-show="areaType=='自选'"
            >
            <el-table-column
              prop="coin"
              label="币种"
              sortable
              width="90">
              <template slot-scope="scope" >
                <div class="left_coinname flex" v-if="scope.row.isMyLike">
                        <div
                            @click.stop="setMylist(scope.row,scope.$index)"
                            :title="$t('label109')"
                            class="option wh-full"
                          >
                            <i  class="icon-star font-16 "
                              :class="scope.row.isMyLike?'el-icon-star-on star_active':'el-icon-star-off star_deft'"
                            >
                            </i>
                        </div>
                        <P :class="(scope.row.tradcoin==selectedCoinData.tradcoin&&scope.row.maincoin==selectedCoinData.maincoin)?'trad_active':''">{{scope.row.tradcoin}}</P>
                      </div>
              </template>
            </el-table-column>
            <el-table-column 
              prop="price"
              label="最新价"
              sortable
              width="90"
              align="right"
              >
              <template slot-scope="scope" v-if="scope.row.isMyLike">
                <p class="currency" v-if="usdtorcny==1">{{ scope.row.price }}</p>
                <p class="currency" v-else>{{ scope.row.cny }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="rise"
              label="涨幅 "
              :formatter="formatter"
              width="100"
              align="right"
              >
              <template slot-scope="scope" v-if="scope.row.isMyLike">
                      <span :class="scope.row.rise >= '0' ? 'color_up' : 'color_down'" 
                      v-if="scope.row.rise>=0">+{{scope.row.rise}}%</span>
                      <span :class="scope.row.rise < '0' ? 'color_down' : 'color_up'" 
                      v-if="scope.row.rise<0">{{scope.row.rise}}%</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
  </div>
</template>
<script>
import {
  addCustomList,
  removeCustomList,
} from "@/assets/js/common.js";
export default {
  name: "coin-Tab",
  props:[
    "coinListData",//socket 接收父组件数据
  ],

  data() {
    return {
      selectedCoinData:JSON.parse(sessionStorage.getItem('quotationDetailsData'))||{},
      usdtorcny:1,
      
      coinTabArr:[],
      areaType:sessionStorage.getItem('mainCoinTab')||'USDT',
      coinList:[]
    };
  },
  computed:{
    marketSocketData(){
      return this.$store.state.marketSocketData
    },
  },
  watch:{
    //监听socket 数据  实时更新
    marketSocketData(data){
      //更新行情
      data.symbols&&this.processData(data.symbols);
    }
  },

  created(){
    //防止socket更新不及时  先用接口数据填充
    this.processData(this.coinListData);
  },
  destroyed() {},
  methods: {
    //填充左侧边栏数据
    processData(resData){
      let listArr=[];
      resData.forEach(item=>{
        let data = Object.assign({},item)
        if(!this.coinTabArr.includes(data.maincoin)){
          this.coinTabArr.push(data.maincoin)
        }
        if(!this.areaType){
          this.areaType = this.coinTabArr[0]
        }
        
        if(data.state=='enable'){
          this.$set(data,'isMyLike',false);
          listArr.push(data)
        }
      })
      //设置自选
      let customList = this.storage.get("customList");
      customList&&customList.forEach(data=>{
        listArr.forEach(item=>{
          if(data.tradcoin==item.tradcoin&&data.maincoin==item.maincoin){
            this.$set(item,'isMyLike',!!data.isMyLike);
          }
        })
      })
      this.coinList = listArr;
    },

    //切换主币种
    changeMainCoin(type){
      this.areaType = type;
      //缓存选择的主币种
      sessionStorage.setItem('mainCoinTab',type)
    },

    formatter(row, column) {
        return row.rise;
    },

    // 设置自选
    setMylist(rowData, index) {
      let data = rowData;
      this.$set(data,'isMyLike',!data.isMyLike);
      this.$set(this.coinList, index, data);
      if (data.isMyLike) {
        addCustomList(data);
      } else {
        removeCustomList(data);
      }
      this.processData(this.coinList);
    },
    //表格行点击  选择币种
    onTableRowClick(rowData) {
      this.selectedCoinData = rowData;
      //通知主组件更新
      this.$emit("onRowClick", rowData);
      //缓存选择的币种
      sessionStorage.setItem('quotationDetailsData',JSON.stringify(rowData));
    },

    //切换列表 人民币价格显示
    showCny(){
      if(this.usdtorcny==1){
        this.usdtorcny=2;
      }else{
        this.usdtorcny=1;
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.coin-switch {
  box-sizing: border-box;
  background: #171b2b;
  height: 100%;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  padding-bottom: 0;
  /deep/ .el-table td{
    border-bottom: none !important;
  }
  .quotes {
    display: flex;
    min-height: 28px;
    span{cursor: pointer;}
  }
  .mock-a {
    color: #b0b8db;
    height: 20px;
    font-size: 12px;
    line-height: 22px;
    padding: 0 6px;
    margin: 0 4px 4px 0;
    border-radius: 2px;
    border-bottom: 0;
    text-transform: uppercase;
    &.active {
      color: #ffffff;
      background-color: #357ce1;
    }
  }
  .tabs {
    padding: 8px 8px 8px 10px;
    display: block;
    height: auto;
    border-radius: 2px 2px 0 0;
    border: 0;
  }
  // 搜索框
  .actions-serch{
    .input-box{
      height: 26px;
      position: relative;
      input{
        background: #171b2b;
        border-color:#383f66;
        color: #d2d6ec;
        padding-left: 28px;
        border: 1px solid #383f66;
        border-radius: 2px;
        font-size: 12px;
        width: 100%;
        height: 100%;
        
      }
    }
    .i_sos{position: absolute;left: 5px;top: 6px;}
    .btnexch{
      padding-left: 40px;font-size: 14px;
      i{font-size: 16px;margin-right: 5px;}
    }
  }
  // coin_list
  .coin_list{
    tr{font-size: 12px!important;}
    p,span{font-size: 12px;}
    .el-table .cell{
      p{text-align: right;color: #b0b8db;}
      .trad_active{color: #357ce1;}
    }
    
  }
  .left_coinname{
    .option {width: 24px;}
    .star_active{color: $color-primary;}
  }
}

@media screen and (max-width:1440px) {
  .coin-switch .mock-a {
    padding: 0 2px;
    height: 18px;line-height: 18px;
  }
}

</style>

